<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>招募详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/vue.min.js"></script>
    <style>
        tr td,
        tr th {
            text-align: center !important;
            border: none !important;
        }

        .layui-laydate-content tr td {
            border-bottom: none !important;
            border-top: none !important;
        }

        tr td {
            border-bottom: 1px solid #eee !important;
            border-top: 1px solid #eee !important;
        }

        .shaixuan .layui-col-md12 .layui-inline {
            margin: 0;
        }

        .shaixuan .layui-col-md12 .layui-inline.layui-col-md3 .layui-form-label {
            width: 30%;
            padding-left: 0;
        }

        .shaixuan .layui-col-md12 .layui-inline.layui-col-md3 .layui-input-inline {
            width: 53%;
        }

        .rotate {
            transform-origin: center center;
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transition: transform 0.2s;
            -moz-transition: -moz-transform 0.2s;
            -moz-transition: -moz-transform 0.2s;
            -o-transition: -o-transform 0.2s;
            -ms-transition: -ms-transform 0.2s;
        }

        .rotate1 {
            transform-origin: center center;
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transition: transform 0.2s;
            -moz-transition: -moz-transform 0.2s;
            -moz-transition: -moz-transform 0.2s;
            -o-transition: -o-transform 0.2s;
            -ms-transition: -ms-transform 0.2s;
        }

        body {
            background: #fff;
        }
    </style>
</head>

<body>
    <div class="layui-fluid" id="All_List">
        <div class="title">赛事基本信息</div>
        <div class="borders">
            <ul>
                <li>
                    <h2>赛事名称：</h2>
                    <p>{{name}}</p>
                </li>
                <li>
                    <h2>对战人数：</h2>
                    <p>{{vsPerNum}}</p>
                </li>
                <li>
                    <h2>起止时间：</h2>
                    <p>{{competitionStartTime}} 至 {{competitionEndTime}}</p>
                </li>
                <li>
                    <h2>赛制规则：</h2>
                    <p>{{rules}}</p>
                </li>
                <li>
                    <h2>主办地：</h2>
                    <p>{{province}}</p>
                </li>
            </ul>
        </div>

        <div class="title">待招募裁判</div>
        <div class="layui-card-body layui-table-body layui-table-main">
            <!-- 表格部分开始 -->
            <table id="application_table" lay-filter="test" lay-data="{id: 'testReload'}"></table>
            <script type="text/html" id="barDemo">
                <a lay-event="look" class="btn_a layui-btn layui-btn-xs">查看</a>
                <a lay-event="watch" class="btn_a layui-btn layui-btn-xs">确认招募</a>
                <!--            <a lay-event="del" class="btn_a layui-btn layui-btn-danger layui-btn-xs">删除</a>-->
            </script>
            <!-- 表格结束 -->
        </div>
        <div class="send_btn" @click="send_btn">确认招募</div>
    </div>
    <script>
        var dataId;

        function child(d) {
            dataId = d
            layui.use(['table', 'laydate'], function () {
                var table = layui.table;
                var form = layui.form;
                var laydate = layui.laydate;
                var index = layer.load(1); //添加laoding,0-2两种方式
                var str = "";
                var new_id;
                laydate.render({ // 初始化时间选择器
                    elem: '#year',
                    type: 'year'
                });
                laydate.render({ // 初始化时间选择器
                    elem: '#birthDay',
                });
                table.on('checkbox(test)', function (obj) {
                    console.log(obj)
                    var checkStatus = table.checkStatus('testReload')
                    // console.log(checkStatus.data)
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        str += checkStatus.data[i].id + ",";
                    }
                    new_id = str.substring(0, str.length - 1)
                    console.log(new_id)
                });
                var app = new Vue({
                    el: "#All_List",
                    data: {
                        items: [],
                        name: '',
                        vsPerNum: '',
                        competitionStartTime: '',
                        competitionEndTime: '',
                        rules: '',
                        province: '',
                        city: '',
                        organizers: '',
                    },
                    methods: {
                        index: function () {
                            var that = this
                            setTimeout(function () {
                                $.ajax({
                                    url: findNewcompetitionById,
                                    type: 'get',
                                    data: {
                                        id: dataId
                                    },
                                    dataType: 'json',
                                    success: function (data) {
                                        console.log(data)
                                        if (data.msg == 0) {
                                            that.name = data.newcompetition.name
                                            that.vsPerNum = data.newcompetition
                                                .vsPerNum
                                            that.competitionStartTime = data
                                                .newcompetition
                                                .competitionStartTime
                                            that.competitionEndTime = data
                                                .newcompetition
                                                .competitionEndTime
                                            that.rules = data.newcompetition
                                                .rules
                                            that.province = data.newcompetition
                                                .province
                                            that.city = data.newcompetition.city
                                            that.organizers = data
                                                .newcompetition.organizers
                                        } else if (data.msg != 0) {
                                            layer.alert(data.msg, {
                                                title: '提示'
                                            })
                                        }
                                    },
                                    error: function (data) {
                                        console.log(data)
                                        layer.alert(data.msg, {
                                            title: '提示'
                                        })
                                    }
                                });
                            }, 200);
                        },
                        send_btn: function () {
                            var that = this
                            if (!new_id) {
                                layer.alert('请选择确认招募的裁判员', {
                                    title: '提示'
                                })
                                return false
                            }
                            layer.confirm('确定招募吗？', function (index) {
                                $.ajax({
                                    url: confirmRecruitment,
                                    type: 'get',
                                    data: {
                                        id: new_id,
                                        competitionId: dataId
                                    },
                                    dataType: 'json',
                                    success: function (data) {
                                        console.log(data)
                                        if (data.msg == 0) {
                                            layer.alert('操作成功', {
                                                title: '提示'
                                            })
                                            table.reload('testReload', {
                                                page: {
                                                    curr: 1 //重新从第 1 页开始
                                                }
                                            }, 'data');
                                        } else {
                                            layer.alert(data.msg, {
                                                title: '提示'
                                            })
                                        }
                                    },
                                    error: function (data) {
                                        console.log(data)
                                        layer.alert(data.msg, {
                                            title: '提示'
                                        })
                                    }
                                });
                                layer.close(index)
                            });
                        }
                    },
                    created: function () {
                        this.index()
                    }
                })
                //第一个实例
                table.render({
                    elem: '#application_table', //指定原始表格元素选择器（推荐id选择器）
                    // height: 600,
                    toolbar: true,
                    defaultToolbar: ['exports', {
                        title: '提示' //标题
                            ,
                        layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                            ,
                        icon: 'layui-icon-tips' //图标类名
                    }],
                    width: "100%",
                    // 附加参数，post token
                    // where: { 'token': token },
                    where: {
                        competitionId: dataId
                    },
                    loading: true,
                    method: 'get',
                    url: getRecruitrefereeList, //数据接口
                    page: true, //开启分页
                    // toolbar: 'default', //开启工具栏，此处显示默认图标
                    limit: 10,
                    limits: [10, 20, 30, 50, 100, 500, 1000, 5000, 10000],
                    cols: [
                        [ //表头
                            {
                                type: 'checkbox',
                                fixed: 'left'
                            },
                            {
                                field: 'id',
                                title: '用户ID',
                                width: 75
                            },
                            {
                                field: 'name',
                                title: '姓名',
                                width: 70
                            },
                            {
                                field: 'sex',
                                title: '性别',
                                width: 70,
                                templet: function (d) {
                                    if (d.sex == "1") {
                                        return "男"
                                    } else if (d.sex == "2") {
                                        return "女"
                                    } else {
                                        return ""
                                    }
                                }
                            },
                            {
                                field: 'bloodType',
                                title: '血型',
                                width: 70,
                                templet: function (d) {
                                    if (d.bloodType == "1") {
                                        return "A"
                                    } else if (d.bloodType == "2") {
                                        return "B"
                                    } else if (d.bloodType == "3") {
                                        return "AB"
                                    } else if (d.bloodType == "4") {
                                        return "O"
                                    } else {
                                        return ""
                                    }
                                }
                            },
                            {
                                field: 'nation',
                                title: '民族',
                                width: 70
                            },
                            {
                                field: 'year',
                                title: '年份',
                                width: 70
                            },
                            {
                                field: 'city',
                                title: '市级',
                                width: 70
                            },
                            {
                                field: 'headPhoto',
                                title: '相关资质照片',
                                width: 150,
                                templet: function (d) {
                                    if (d.headPhoto == null) {
                                        return "-"
                                    } else {
                                        return "<div onclick='show_img(this)' ><img style='width: 32px;height: 32px;' src='" +
                                            d.headPhoto + "'></div>'"
                                    }
                                }
                            },
                            {
                                field: 'addTime',
                                title: '创建时间',
                                width: 200,
                                templet: function (d) {
                                    if (d.addTime == null) {
                                        return "-"
                                    } else {
                                        return d.addTime
                                    }
                                }
                            },
                            {
                                fixed: 'right',
                                title: "操作",
                                width: 200,
                                align: 'center',
                                toolbar: '#barDemo'
                            }
                        ]
                    ],
                    id: 'testReload',
                    done: function (res) {
                        console.log(res)
                        if (res.msg == "2") {
                            parent.window.location.href = getRequestPrefix() +
                                "/footBallAdmin/login.html"
                        }
                        layer.close(index)
                    }
                });
                var checkStatus = table.checkStatus('testReload'); //idTest 即为基础参数 id 对应的值
                $("span").on("click", function () {
                    checkStatus
                    console.log(checkStatus) //获取选中行数量，可作为是否有选中行的条件
                    console.log(checkStatus.isAll) //表格是否全选
                })
                //监听点击的按钮，获取行信息
                table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    //获得当前行数据
                    var $ = layui.$
                    var data = obj.data,
                        layEvent = obj.event; //获得 lay-event 对应的值
                    if (layEvent === "look") {
                        layer.open({
                            content: "Referee_info.html",
                            type: 2, //打开的窗口的类型
                            area: ["100%", "100%"],
                            title: "查看信息",
                            // btn: ['确认', '取消'],//开启显示按钮功能
                            // btnAlign: 'c',//居中显示按钮
                            // shade:true,
                            shadeClose: true,
                            success: function (layero, index) {
                                // console.log(data)//获取点击行的数据,获取打开的iframe
                                var body = layer.getChildFrame('body', index);
                                var iframeWin = window[layero.find('iframe')[0]['name']];
                                console.log(data)
                                if (data.role == "1") {
                                    body.find('#juese').text("男子裁判员");
                                } else if (data.role == "2") {
                                    body.find('#juese').text("女子裁判员");
                                } else if (data.role == "3") {
                                    body.find('#juese').text("五人制/沙足裁判员");
                                } else if (data.role == "4") {
                                    body.find('#juese').text("男足裁判监督");
                                } else if (data.role == "5") {
                                    body.find('#juese').text("五人制裁判监督");
                                } else if (data.role == "6") {
                                    body.find('#juese').text("裁判技术讲师");
                                } else if (data.role == "7") {
                                    body.find('#juese').text("裁判体能讲师");
                                } else if (data.role == "8") {
                                    body.find('#juese').text("女足裁判监督");
                                }
                                if (data.bloodType == "1") {
                                    body.find('#bloodType').text("A");
                                } else if (data.bloodType == "2") {
                                    body.find('#bloodType').text("B");
                                } else if (data.bloodType == "3") {
                                    body.find('#bloodType').text("AB");
                                } else if (data.bloodType == "4") {
                                    body.find('#bloodType').text("O");
                                }
                                if (data.documentType == "1") {
                                    body.find('#documentType').text("身份证");
                                } else if (data.documentType == "2") {
                                    body.find('#documentType').text("护照");
                                } else if (data.documentType == "3") {
                                    body.find('#documentType').text("户口本");
                                }
                                if (data.sex == "1") {
                                    body.find('#sex').text("男");
                                } else if (data.sex == "2") {
                                    body.find('#sex').text("女");
                                }
                                if (data.politicCountenance == "1") {
                                    body.find('#politicCountenance').text("党员");
                                } else if (data.politicCountenance == "2") {
                                    body.find('#politicCountenance').text("共青团员");
                                } else if (data.politicCountenance == "3") {
                                    body.find('#politicCountenance').text("群众");
                                }
                                body.find('#id').text(data.id);
                                if (data.name != null) {
                                    body.find("#name").text(data.name);
                                }
                                if (data.documentNumber != null) {
                                    body.find("#documentNumber").text(data.documentNumber);
                                }
                                if (data.height != null) {
                                    body.find("#height").text(data.height);
                                }
                                if (data.weight != null) {
                                    body.find("#weight").text(data.weight);
                                }
                                if (data.nationality != null) {
                                    body.find("#nationality").text(data.nationality);
                                }
                                if (data.nation != null) {
                                    body.find("#nation").text(data.nation);
                                }
                                if (data.associationName != null) {
                                    body.find("#associationName").text(data
                                        .associationName);
                                }
                                if (data.year != null) {
                                    body.find("#year").text(data.year);
                                }
                                if (data.birthDay != null) {
                                    body.find("#birthDay").text(data.birthDay);
                                }
                                if (data.birthAddress != null) {
                                    body.find("#birthAddress").text(data.birthAddress);
                                }
                                if (data.tel != null) {
                                    body.find("#tel").text(data.tel);
                                }
                                if (data.otherTel != null) {
                                    body.find("#otherTel").text(data.otherTel);
                                }
                                if (data.email != null) {
                                    body.find("#email").text(data.email);
                                }
                                if (data.graduateSchool != null) {
                                    body.find("#graduateSchool").text(data.graduateSchool);
                                }
                                if (data.major != null) {
                                    body.find("#major").text(data.major);
                                }
                                if (data.heightEducation != null) {
                                    body.find("#heightEducation").text(data
                                        .heightEducation);
                                }
                                if (data.englishLevel != null) {
                                    body.find("#englishLevel").text(data.englishLevel);
                                }
                                if (data.workUnit != null) {
                                    body.find("#workUnit").text(data.workUnit);
                                }
                                if (data.job != null) {
                                    body.find("#job").text(data.job);
                                }
                                if (data.address != null) {
                                    body.find("#address").text(data.address);
                                }
                                if (data.refereeClothingSize != null) {
                                    body.find("#refereeClothingSize").text(data
                                        .refereeClothingSize);
                                }
                                if (data.otherClothingSize != null) {
                                    body.find("#otherClothingSize").text(data
                                        .otherClothingSize);
                                }
                                if (data.soccerShoesSize != null) {
                                    body.find("#soccerShoesSize").text(data
                                        .soccerShoesSize);
                                }
                                if (data.runningShoesSize != null) {
                                    body.find("#runningShoesSize").text(data
                                        .runningShoesSize);
                                }
                                if (data.medicalReportDate != null) {
                                    body.find("#medicalReportDate").text(data
                                        .medicalReportDate);
                                }
                                // if (data.bankList.length > 0) {
                                //     if (data.bankList[0].bankCardNumA) {
                                //         body.find("#bankCardNumA").text(data.bankList[0]
                                //             .bankCardNumA);
                                //         body.find("#openingBankA").text(data.bankList[0]
                                //             .openingBankA);
                                //     }
                                //     if (data.bankList[0].bankCardNumB) {
                                //         body.find("#bankCardNumB").text(data.bankList[0]
                                //             .bankCardNumB);
                                //         body.find("#openingBankB").text(data.bankList[0]
                                //             .openingBankB);
                                //     }
                                //     if (data.bankList[0].bankCardNumC) {
                                //         body.find("#bankCardNumC").text(data.bankList[0]
                                //             .bankCardNumC);
                                //         body.find("#openingBankC").text(data.bankList[0]
                                //             .openingBankC);
                                //     }
                                // }
                                body.find("#city").text(data.city);
                                body.find("#medicalReportUrl").attr("src", data
                                    .medicalReportUrl);
                                body.find("#headPhoto").attr("src", data.headPhoto);
                                // body.find('#refereeClothingSize').text(data.refereeClothingSize);
                                // body.find('#otherClothingSize').text(data.otherClothingSize);
                                // body.find('#soccerShoesSize').text(data.soccerShoesSize);
                                // body.find('#runningShoesSize').text(data.runningShoesSize);
                            }
                        })
                    };
                    // 招募按钮
                    if (layEvent === "watch") {
                        // console.log(data)
                        layer.confirm('确定招募吗？', function (index) {
                            $.ajax({
                                url: confirmRecruitment,
                                type: 'get',
                                data: {
                                    id: data.id,
                                    competitionId: dataId
                                },
                                dataType: 'json',
                                success: function (data) {
                                    console.log(data)
                                    if (data.msg == 0) {
                                        layer.alert('操作成功', {
                                            title: '提示'
                                        })
                                        table.reload('testReload', {
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                        }, 'data');
                                    } else {
                                        layer.alert(data.msg, {
                                            title: '提示'
                                        })
                                    }
                                },
                                error: function (data) {
                                    console.log(data)
                                    layer.alert(data.msg, {
                                        title: '提示'
                                    })
                                }
                            });
                            layer.close(index)
                        });
                    };
                    // 确认招募按钮
                    // $('.send_btn').click(function () {
                    //     // console.log(111)
                    //     // var data = {
                    //     //     id: new_id,
                    //     // }
                    //     // console.log(data)
                    //     // return false
                    //
                    // })
                    // // 删除按钮
                    // if (layEvent === 'del') {
                    //     layer.confirm('真的删除行么', function (index) {
                    //         layer.close(index);
                    //         $.ajax({ //保存表单
                    //             url: delJudgeList,
                    //             type: "POST",
                    //             // 设置的是请求参数
                    //             data: {
                    //                 id: data.id
                    //             },
                    //             // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
                    //             dataType: 'json',
                    //             success: function (res) {
                    //                 if (res.msg !== "0") {
                    //                     layer.alert(res.msg, {
                    //                         title: "提示"
                    //                     });
                    //                 } else {
                    //                     layer.alert("删除成功", {
                    //                         title: "提示",
                    //                         cancel: function (index) {
                    //                             layer.close(index);
                    //                             obj.del();
                    //                         }
                    //                     }, function (index) {
                    //                         layer.close(index);
                    //                         obj.del();
                    //                     });
                    //                 }
                    //             }
                    //         })
                    //     });
                    // }
                });
            });
        }


        function show_img(t) { //放大图片
            var t = $(t).find("img");
            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['300px', '343px'], //宽高
                shadeClose: true, //开启遮罩关闭
                end: function (index, layero) {
                    return false;
                },
                content: '<div style="text-align:center;width:100%;height: 100%;overflow: hidden"><img src="' +
                    $(t)
                    .attr('src') + '" style="width:100%;height: 100%;display: block;margin: 0 auto;"/></div>'
            });
        }
    </script>
</body>

</html>